<template>
  <div>
    <el-form ref="elForm" :model="formData" size="medium" label-width="134px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名" prop="repManName">
            <el-input v-model="formData.repManName" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender" size="medium">
              <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="出生年月日" prop="birthDate">
            <el-date-picker v-model="formData.birthDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" prop="folk">
            <el-select v-model="formData.folk" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in folkOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" prop="pol">
            <el-select v-model="formData.pol" placeholder="政治面貌" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in polOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="formData.mobile" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="workTel">
            <el-input v-model="formData.workTel" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="学历" prop="edu">
            <el-select v-model="formData.edu" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in eduOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业院校" prop="graCollege">
            <el-input v-model="formData.graCollege" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所选专业" prop="choiceSpe">
            <el-input v-model="formData.choiceSpe" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所选专业类型" prop="spe">
            <el-select v-model="formData.spe" placeholder="请选择所选专业类型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in speOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建所前从事专业" prop="beforeSpe">
            <el-input v-model="formData.beforeSpe" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="何时参加工作" prop="beginWorkDate">
            <el-date-picker v-model="formData.beginWorkDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职务" prop="manageJob">
            <el-select v-model="formData.manageJob" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in manageJobOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职级" prop="jobLevel">
            <el-select v-model="formData.jobLevel" placeholder="职级" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in jobLevelOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职称" prop="title">
            <el-select v-model="formData.title" clearable placeholder="请选择">
              <el-option v-for="(item,index) in titleOptions" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="何时进卫生监督所" prop="getInDate">
            <el-date-picker v-model="formData.getInDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员性质" prop="ifStaffPer">
            <el-select v-model="formData.ifStaffPer" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in ifStaffPerOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别" prop="perCode">
            <el-radio-group v-model="formData.perCode" size="medium">
              <el-radio v-for="(item, index) in perCodeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否为在编人员" prop="perType">
            <el-radio-group v-model="formData.perType" size="medium">
              <el-radio v-for="(item, index) in perTypeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政执法证号" prop="enfCardNo">
            <el-input v-model="formData.enfCardNo" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="何时取得行政执法证" prop="getCardDate">
            <el-date-picker v-model="formData.getCardDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="目前持有的有效的监督员证号" prop="healthPerNo">
            <el-input v-model="formData.healthPerNo" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="何时取得卫生监督员资格" prop="getQuaDate">
            <el-date-picker v-model="formData.getQuaDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卫生监督胸牌号" prop="healthCardNo">
            <el-input v-model="formData.healthCardNo" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所持有效监督员证的有效时间" prop="cardDay">
            <el-date-picker v-model="formData.cardDay" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {post} from "@/utils/api";
  export default {
    data() {
      return {
        formData: {},
        genderOptions: [{
          "label": "男",
          "value": "男"
        }, {
          "label": "女",
          "value": "女"
        }],
        folkOptions: [{
          "label": "汉",
          "value": "汉"
        }, {
          "label": "其他",
          "value": "其他"
        }],
        polOptions: [{
          "label": "中共党员",
          "value": "中共党员"
        }, {
          "label": "团员",
          "value": "团员"
        }, {
          "label": "民族党派",
          "value": "民族党派"
        }, {
          "label": "群众",
          "value": "群众"
        }],
        eduOptions: [{
          "label": "无学历",
          "value": "无学历"
        }, {
          "label": "初中",
          "value": "初中"
        }, {
          "label": "高中",
          "value": "高中"
        }, {
          "label": "中专",
          "value": "中专"
        }, {
          "label": "大专",
          "value": "大专"
        }, {
          "label": "本科",
          "value": "本科"
        }, {
          "label": "硕士",
          "value": "硕士"
        }, {
          "label": "博士",
          "value": "博士"
        }],
        speOptions: [{
          "label": "工程",
          "value": "工程"
        }, {
          "label": "法律",
          "value": "法律"
        }, {
          "label": "医药",
          "value": "医药"
        }, {
          "label": "公共卫生",
          "value": "公共卫生"
        }, {
          "label": "无专业",
          "value": "无专业"
        }, {
          "label": "其他专业",
          "value": "其他专业"
        }, {
          "label": "不详",
          "value": "不详"
        }],
        manageJobOptions: [{
          "label": "所(局)长",
          "value": 1
        }, {
          "label": "党委(副)书记",
          "value": 2
        }, {
          "label": "副所(局)长",
          "value": 3
        }, {
          "label": "科室主任",
          "value": 4
        }, {
          "label": "科室副主任",
          "value": 5
        }, {
          "label": "无职称",
          "value": 6
        }],
        jobLevelOptions: [{
          "label": "无",
          "value": 0
        }, {
          "label": "省部级正职",
          "value": 1
        }, {
          "label": "省部级副职",
          "value": 2
        }, {
          "label": "厅局级正职",
          "value": 3
        }, {
          "label": "厅局级副职",
          "value": 4
        }, {
          "label": "县处级正职",
          "value": 5
        }, {
          "label": "县处级副职",
          "value": 6
        }, {
          "label": "乡科级正职",
          "value": 7
        }, {
          "label": "乡科级副职",
          "value": 8
        }, {
          "label": "科办员",
          "value": 9
        }],
        titleOptions: [{
            "label": "初级医师",
            "value": 1,
          }, {
            "label": "初级技师",
            "value": 2,
          }, {
            "label": "助理政工师",
            "value": 3,
          }, {
            "label": "助理工程师",
            "value": 4,
          }, {
            "label": "助理会计师",
            "value": 5,
          }, {
            "label": "研究实习员",
            "value": 6,
          }, {
            "label": "主管",
            "value": 7,
          }, {
            "label": "主治",
            "value": 8,
          }, {
            "label": "中级医师",
            "value": 9,
          }, {
            "label": "中级技师",
            "value": 10,
          }, {
            "label": "政工师",
            "value": 11,
          }, {
            "label": "馆员",
            "value": 12,
          }, {
            "label": "工程师",
            "value": 13,
          }, {
            "label": "会计师",
            "value": 14,
        }, {
            "label": "副主任医师",
            "value": 15,
          }, {
            "label": "副主任技师",
            "value": 16,
          }, {
            "label": "高级政工师",
            "value": 17,
          }, {
            "label": "高级会计师",
            "value": 18,
          }, {
            "label": "主任医师",
            "value": 19,
          }, {
            "label": "主任技师",
            "value": 20,
          }, {
          "label": "无职称",
          "value": 21,
        }, {
          "label": "未聘任专业技术职务",
          "value": 22,
        }, {
          "label": "不详",
          "value": 23,
        }],
        ifStaffPerOptions: [{
          "label": "聘用制干部",
          "value": 1
        }, {
          "label": "聘用制工人",
          "value": 2
        }, {
          "label": "固定干部",
          "value": 3
        }, {
          "label": "固定工人",
          "value": 4
        }, {
          "label": "其他",
          "value": 5
        }],
        perCodeOptions: [{
          "label": "监督人员",
          "value": 1
        }, {
          "label": "协查人员",
          "value": 2
        }, {
          "label": "不详",
          "value": 9
        }],
        perTypeOptions: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 0
        }],
        titleProps: {
          "multiple": false,
          "label": "label",
          "value": "value",
          "children": "children"
        },
      }
    },
    methods: {
      async submitForm() {
        console.log(this.formData)
        let res = await post("person/personadd",{...this.formData})
        console.log(res)
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      },
  }

</script>
<style>
</style>
